import React from 'react'
import PropTypes from 'prop-types'
import memoizeOne from 'memoize-one'

import { Container } from './StyledCookBook'

import Swiper from './Swiper'
import Search from '@c/search/Search'
import HotCate from './HotCate'
import Top10 from './Top10'

const CookBookUi = (props) => {
  // console.log(props.list)
  // 计算属性
  const swiper = memoizeOne(list => list.slice(0, 5))
  // const filterSwiper = swiper(props.list)
  // console.log(filterSwiper)

  const top10 = memoizeOne(list => list.slice(0, 10))

  return (
    <Container>
      <header>美食大全</header>
      <Swiper list={swiper(props.list)} onGoToDetail={props.onGoToDetail}></Swiper>
      <Search 
        outerbg="#f5f5f9"
        innerbg="#fff"
        hasborder={true} 
        radius={.06} 
        color="#ee742f"></Search>
      <HotCate></HotCate>
      <Top10 list={top10(props.list)} onGoToDetail={props.onGoToDetail}></Top10>
    </Container>
  )
}

// 类组件 static propTypes={} 静态属性，类绑定属性，通过类直接调用

// 函数式组件绑定类型检查 挂载在函数式组件上
// CookBookUi.defaultProps = {
//   title: 'default value'
// }
// CookBookUi.propTypes = {
//   list: PropTypes.array
// }
CookBookUi.propTypes = {
  list: PropTypes.object
}

export default CookBookUi